<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	
	const customBar = getApp().globalData.customBar
	const loading = ref(false)
	const searchValue = ref('')
	const allList = [
		{img: 'https://s3-gzpu.didistatic.com/ese-feedback/LogicFlow/logo-horizontal-blue.png', name: 'LogicFlow', des: 'LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。', url: 'https://site.logic-flow.cn'},
		{img: 'https://play.vuejs.org/logo.svg', name: 'vue.js', des: '渐进式JavaScript 框架。易学易用，性能出色，适用场景丰富的 Web 前端框架。', url: 'https://cn.vuejs.org/'},
		{img: 'https://datav-vue3.jiaminghi.com/./favicon.ico', name: 'DataV', des: 'Vue 大屏数据展示组件库', url: 'https://datav-vue3.jiaminghi.com'},
		{img: 'https://www.lingchen.kim/art-design-pro/docs/logo.png', name: 'Art Design Pro', des: 'Vue3 + TypeScript + Element Plus + Vite的开源后台管理系统', url: 'https://www.lingchen.kim/art-design-pro/docs/'},
		{img: 'https://env-00jxtav10wqu-static.normal.cloudstatic.cn/fengy/logo.png', name: 'fengy', des: 'fengy是一个用于快速搭建项目和页面的工具，主要用于中小公司快速开发', url: 'https://env-00jxtav10wqu-static.normal.cloudstatic.cn/fengy/'}
	]
	const list = ref([])
	
	function search() {
		if(!loading.value) {
			let value = searchValue.value
			loading.value = true
			if(value != '') {
				let arr = allList.filter(item => item.name.includes(value))
				arr.forEach(item => {
					item.selectName = item.name.replace(value, `<text style="color: #2979ff;background-color: rgba(255,255,255,0.1)">${value}</text>`)
				})
				list.value = arr
			} else {
				list.value = allList
			}
			loading.value = false
		}
	}
	function openPage(url) {
		// #ifdef H5
		window.open(url)
		// #endif
	}
	
	onLoad(() => {
		search()
	})
</script>

<template>
	<view class="app-container" :style="{paddingTop: customBar + 'px'}">
		<navbar text="快捷导航"></navbar>
		<view class="app-head">
			<uv-input v-model="searchValue" placeholder="输入导航名称..." placeholderStyle="color: rgba(147, 197, 253, 0.5)" color="#DBEAFE" shape="circle"
				clearable :customStyle="{borderColor: 'rgba(59, 130, 246, 0.3) !important'}" confirmType="search" @confirm="search">
				<template v-slot:suffix>
					<uv-button color="linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%)" shape="circle" size="small" text="搜索" :disabled="loading" @click="search" />
				</template>
			</uv-input>
		</view>
		<scroll-view scroll-y="true" class="app-content">
			<view class="list-box" v-if="list.length">
				<view v-for="(item, index) in list" :key="index" class="nav-box" @click="openPage(item.url)">
					<uv-image :src="item.img" width="90" height="90" mode="aspectFit"></uv-image>
					<view class="nav-info">
						<view class="name uv-line-1" v-html="item.selectName || item.name"></view>
						<view class="des uv-line-2">{{item.des}}</view>
					</view>
				</view>
			</view>
			<view class="empty-box" v-else>
				<empty text="没有找到哟..."></empty>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		height: calc(100vh - var(--window-bottom));
		.app-head{
			margin: 0 12rpx;
			height: 124rpx;
			display: flex;
			align-items: center;
		}
		.app-content{
			width: 100%;
			height: calc(100% - 124rpx);
			.list-box{
				padding: 0 12rpx 12rpx;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
				.nav-box{
					width: 100%;
					padding: 12rpx;
					display: flex;
					align-items: center;
					gap: 20rpx;
					border: 2rpx solid rgba(59, 130, 246, 0.3);
					border-radius: 24rpx;
					background: rgba(30, 64, 175, 0.3);
					.nav-info{
						width: calc(100% - 110rpx);
						display: flex;
						flex-direction: column;
						gap: 6rpx;
						.name{
							font-weight: 600;
							color: #BFDBFE;
							font-size: var(--theme-lg);
							line-height: var(--theme-lg-line);
						}
						.des{
							color: rgba(147, 197, 253, 0.7);
							font-size: var(--theme-sm);
							line-height: var(--theme-sm-line);
						}
					}
				}
			}
			.empty-box{
				padding: 48rpx;
				border-radius: 24rpx;
			}
		}
	}
</style>